<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="control.css">
        <meta charset="utf-8">
        <script src="jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="jquery.sparkline.js"></script>
        <script src="kinetic-v4.4.0.min.js"></script>
        <script src="communication.js"></script>
        <script src="interface.js"></script>
		<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script type="text/javascript" src="jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="html5slider.js"></script>
    </head>
    <body>
	<!--<div id="wrapper">-->
	
		<table class="main_table">
			<tr><td width="400px">
			<h1 id="title">LUMATech Rover - Control panel</h1>
			</td>
			<td>
			<div id="bigmsg">this space is for bigmsgs</div>
			<div id="latency_title" style="float:left; margin-right:5px;">Latency: </div>
			<div id="latency" style="float:left; margin-right: 2px;">0</div>
			<div style="float:left;">ms</div>
			<div id="language_controls">
				<button onclick="setLanguage('fi');">Suomi</button>
				<button onclick="setLanguage('en');">English</button>
			</div>
			</div>
			</td>
			</tr>
			<tr>
				<td style="text-align: center;">
					<div id="video_container">
					<!--src="http://192.168.1.213:8080/?action=stream"  http://193.167.45.140:8888/video-->
						<img id="video1" class="flip" src="/video" alt="Webcam feed">
					</div>
				</td>
				<td height="330px">
					<div id="control_area">
						
						<div id="control_pad"></div>
						
					</div>
					<div id="control_area_slider">
					<table class="motor_table" width="300px" style="float:left;">
						<tr>
							<td><div id="fwd">fwd</div></td>
							<td><div id="bwd">bwd</div></td>
							<td><div id="lt">left</div></td>
							<td><div id="rt">right</div></td>
							<td><div id="stop">stop</div></td>
						</tr>
						<tr>
							<td><input type="radio" name="motors" value="fwd" checked="checked"></td>
							<td><input type="radio" name="motors" value="bwd"></td>
							<td><input type="radio" name="motors" value="left"></td>
							<td><input type="radio" name="motors" value="right"></td>
							<td><input type="radio" name="motors" value="stop"></td>
						</tr>
					</table>
					
					<button value="exec" style="float:right; margin-top:20px; margin-right:20px;" onclick="add_command(new Cmd(getCheckedRadioId('motors'),document.getElementById('drive_speed').value,document.getElementById('drive_duration').value))" id="add_button">Add cmd</button>
						
					<div style="clear:both;"></div>
						<br />
						
						<table><tr><td><div id="speed">Speed</div></td><td style="width: 50%">
						<input type="range" id="drive_speed" value="5" step="1" min="2" max="10" onChange="document.getElementById('range_test').innerText = this.value;" />
						</td><td>
						<div id="range_test" style="width:40px;">5</div></td></tr><tr>
						<td><div id="duration">Duration</div></td><td>
						<input type="range" id="drive_duration" value="1000" step="100" min="100" max="10000" onChange="document.getElementById('range_test2').innerText = this.value;" />
						</td><td>
						<div id="range_test2">1000</div></td>
						</tr></table>
						<br />
						<hr /><br />
						
						<table id="cmds_table">
							<tr>
								<td><div id="cmd1">#1</div></td>
								<td><div id="cmd2">#2</div></td>
								<td><div id="cmd3">#3</div></td>
								<td><div id="cmd4">#4</div></td>
								<td><div id="cmd5">#5</div></td>
								<td><button onclick="delete_command();" value="del" style="width:100%;background:#b33a3a;" id="del_button">Del</button></td>
								<td><button onclick="execute_commands();" value="exec" style="width:100%;background:#3fb13f;" id="ex_button">Exec</button></td>
							</tr>
						</table>
						
					</div>
					<div id="spectrum_measurements">
						<h2 id="spectrum_title">Measuring spectrum</h2>
						<div id="spectrum_results"></div>
						
						<table class="sens">
							<tr>
								<th style="background:#b33a3a;">red</th>
								<th style="background:#3fb13f;">green</th>
								<th style="background:#4242ae;">blue</th>
								<th style="background:#ac41ab;">ir</th>
							</tr>
							<tr>
								<td>
									<div id="sensor_spec_r">0</div>
								</td>
								<td>
									<div id="sensor_spec_g">0</div>
								</td>
								<td>
									<div id="sensor_spec_b">0</div>
								</td>
								<td>
									<div id="sensor_spec_ir">0</div>
								</td>
							</tr>
						</table>
						<div id="chart1" style="height:200px; width:100%;"></div><br />
						<div style="clear:both;"></div>
					</div>
					<div id="histories">
						<h2 id="history_title">Sensor histories</h2><div id="history_help">Select a sensor</div>
						<table>
							<tr>
								<!--<td>
									<button onclick="open_spec_chart()" class="history_buttons" id="spec_history_but">Spectrum</button>
								</td>-->
								<td>
									<button onclick="open_humidity_chart()" class="history_buttons" id="hum_history_but">Humidity</button>
								</td>
								<td>
									<button onclick="open_temp_chart()" class="history_buttons" id="temp_history_but">Temperat.</button>
								</td>
								<td>
									<button onclick="open_solar_chart()" class="history_buttons" id="sol_history_but">Solar</button>
								</td>
							</tr>
						</table><br />
						<div id="spec_chart" style="height:200px; width:100%;"></div>
						<div id="humidity_chart" style="height:200px; width:100%;"></div>
						<div id="temp_chart" style="height:200px; width:100%;"></div>
						<div id="solar_chart" style="height:200px; width:100%;"></div>
						<div style="clear:both;"></div>

					</div>
					<div id="button_area">
						<!--<button onclick="switch_controls()" id="switch">Controls</button>-->
						<button onclick="switch_control()" id="cambutton">Camera</button>
						<button onclick="reset_camera()" id="camreset">Reset camera</button>
						<!--<button onclick="measure_spectrum()" id="spectrum_but">Measure spectrum</button>-->
						<!--<button onclick="measureHumidity()" id="humidity_but">Measure humidity</button>-->
						<button onclick="measureHumidity(); measureTemperature();" id="temperature_but">Get temp. and hum.</button>
						<button onclick="open_history()" id="history_but">Histories</button>
						<!--<button onclick="test_results()" id="test">test</button>-->
					<!--	<button onclick="test_results();" id="test">test</button>
						<button onclick="measureTemperature();" id="test">Temperature</button>
						<button onclick="measureHumidity();" id="test">Humidity</button>-->
						</div>
				</td>
			</tr>
			<tr>
				<td>
					<div id="logscreen">
						<ol id="loglist">
						</ol>
					</div>
				</td>
				<td>
            <div id="sensors">
				<canvas id="compass" width="130" height="100" style="float:left; margin-right: 5px;"></canvas>
				<canvas id="xy_acc" width="83" height="83" style="background: white; padding:5px; margin-top:3px; float:left; margin-right: 5px; border:1px solid black; border-radius: 4px 4px;"></canvas>
				<canvas id="zy_acc" width="83" height="83" style="background: white; padding:5px; margin-top:3px; float:left; margin-right: 5px; border:1px solid black; border-radius: 4px 4px;"></canvas>
				
                <table class="sens" style="width: 45%;">
                    <tr>
                        <!--<th id="sensor_acc_name" title="acceleration - x, y, z">Acceleration</th>-->
						<!--<th id="sensor_mag_name" title="compass - x, y, z">compass</th>-->
						<!--<th id="sensor_spec_name" title="spectrum - r, g, b, ir">spectrum</th>-->
						<th id="sensor_hum_name" title="humidity">Humidity</th>
						<th id="sensor_temp_name" title="temperature">Temperature</th>
						<th id="sensor_solar_name" title="solar panel">Solar</th>
                    </tr>
                    <tr>
                        <!--<td id="sensor_acc_data">0,0,0</td>-->
                        <!--<td id="sensor_mag_data">0,0,0</td>-->
						<!--<td id="sensor_spec_data">0,0,0,0</td>-->
						<td id="sensor_hum_data">0</td>
						<td id="sensor_temp_data">0</td>
						<td id="sensor_solar_data">0</td>
                    </tr>
                </table>
            </div>
			</td>
			</tr>
       
		</table>
    </body>
</html>
